<a href="<?php echo $this->url(array('action' => 'index'), 'example_action'); ?>"><?php echo BaseZF::escape(_('Back to example index')); ?></a>

<h2><?php echo BaseZF::escape(_('An ExtGrid Implementation')); ?></h2>
<style>
    #grid-example {
        width:500px;
        height:400px;
        overflow:hidden;
        margin: 10px;
    }

</style>
<script>
Event.onDOMReady(function() {

    // Data Sources
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: '/Example/extGridAjax'
        }),

        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'nb_results',
            id: 'id'
        }, [
        {name: 'example_id', mapping: 'example_id'},
        {name: 'login', mapping: 'login'}
        ]),

        remoteSort: true
    });

    // default Order
    ds.setDefaultSort('member_id', 'ASC');

    // Column Model
    var cm = new Ext.grid.ColumnModel([{
        header: "Example Id",
        dataIndex: 'example_id',
        width: 100
    },{
        header: "Login",
        dataIndex: 'login',
        width: 100
    }]);

    cm.defaultSortable = true;

    var grid = new Ext.grid.Grid('grid-example', {
        ds: ds,
        cm: cm,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
        enableColLock:false,
        loadMask: true
    }).render();

    var gridFoot = grid.getView().getFooterPanel(true);
    var paging = new Ext.PagingToolbar(gridFoot, ds, {
        pageSize: 15,
        displayInfo: true,
        displayMsg: 'Displaying posts {0} - {1} of {2}',
        emptyMsg: 'No Membre to display'
    });

    //create a paging footer
    ds.load({params:{start:0, limit:15}});

});
</script>

<div id="grid-example">
</div>
